<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮换横幅广告</title>
    <style type="text/css">
        a{font-size: 13px;background-color: coral;
            color: white;width: 20px;padding: 5px 10px;
            text-decoration: none}
    </style>
    <script>
        var nowShow=1;//nowShow为当前显示的图像序号
        function show(index) {
            if(Number(index)){
                clearTimeout(sid);
                nowShow=index;
            }
            for (var i=1;i<5;i++){
                //分别显示，隐藏对应的图像
                if (i == nowShow)
                    document.getElementById("img0"+nowShow).style.display="";
                else
                    document.getElementById("img0"+i).style.display="none";
            }
            //设置下一个图像
            if(nowShow == 4)
                nowShow=1;
            else
                nowShow++;
            sid=setTimeout('show()',3000);
        }
    </script>
</head>
<body onload="show()">
      <div style="position:absolute;left: 60px;top: 60px;">
          <img id="img01" src="01.jpg" style="display: none;" border="1">
          <img id="img02" src="02.jpg" style="display: none;" border="1">
          <img id="img03" src="03.jpg" style="display: none;" border="1">
          <img id="img04" src="12.jpg" style="display: none;" border="1">
      </div>
      <div style="position: absolute;left:300px;top:230px;"align="center">
          <a href="javascript:show(1)">1</a>
          <a href="javascript:show(2)">2</a>
          <a href="javascript:show(3)">3</a>
          <a href="javascript:show(4)">4</a>

      </div>
</body>
</html>